<template>
  <div class="login-container">
    <div class="login-table">
      <h3 class="login-title">蘑菇博客后台管理系统</h3>
      <div class="login-body">
        <el-input
          v-model="userinfo.username"
          placeholder="username"
          prefix-icon="el-icon-user-solid"
          @input="handle"
        ></el-input>
        <el-input
          v-model="userinfo.password"
          placeholder="password"
          prefix-icon="el-icon-unlock"
        ></el-input>
      </div>
      <div class="login-checkbox">
        <el-checkbox v-model="checked">七天免登录</el-checkbox>
      </div>
      <el-row>
        <el-button type="primary" @click="postLogin">登录</el-button>
      </el-row>
    </div>
    <vue-particles
      color="#fff"
      :particleOpacity="0.7"
      :particlesNumber="60"
      shapeType="circle"
      :particleSize="4"
      linesColor="#fff"
      :linesWidth="1"
      :lineLinked="true"
      :lineOpacity="0.4"
      :linesDistance="150"
      :moveSpeed="2"
      :hoverEffect="true"
      hoverMode="grab"
      :clickEffect="true"
      clickMode="push"
    >
    </vue-particles>
  </div>
</template>

<script>
// 导入登录请求
import { mapMutations } from 'vuex';
import { login } from '../api/login';
// 导入本地持久化的请求
// import { setItem } from '../Utils/storage';
// 导入配置文件config
// import config from '../config/url.config';

export default {
  data() {
    return {
      userinfo: {
        // 用户名
        username: '',
        //  用户密码
        password: '',
      },
      //   是否选择七天免登录
      checked: '',
      // 定义路由规则
      routes: [
        {
          path: '/home',
          name: 'Home',
          component: () => import('../views/Home.vue'),
          children: [
            {
              //   // 刘仙博客
              //   // 博客管理
              path: '/restapi/webRestApi',
              name: 'Blog',
              component: () => import('../components/blog/blog.vue'),
            },
            {
              // 博客分类管理
              path: '/restapi/adminRestApi',
              name: 'BlogSort',
              component: () => import('../components/blog/blogSort.vue'),
            },
            // 雷爽爽
            {
              path: '/restapi/pictureRestApi',
              name: 'bokelable',
              component: () => import('../components/Bokelable.vue'),
            },
            // 陈宇航
            {
              path: '/authority/admin',
              name: 'Rights',
              component: () => import('../views/Rights.vue'),
            },
            {
              path: '/authority/role',
              name: 'Users',
              component: () => import('../views/Users.vue'),
            },
            // 杨坤
            {
              path: '/message/comment',
              name: 'Comment',
              component: () => import('../views/information/comment.vue'),
            },
            {
              path: '/message/feedback',
              name: 'Feedback',
              component: () => import('../views/information/feedback.vue'),
            },
            // 葛威
            {
              path: '/menuadm',
              name: 'Menuadm',
              component: () => import('../views/menuadm.vue'),
            },
            {
              path: '/useradm',
              name: 'Useradm',
              component: () => import('../views/useradm.vue'),
            },
            // 雷子雄
            {
              path: '/site',
              name: 'Site',
              component: () => import('../views/Site.vue'),
            },
          ],
        },
      ],
    };
  },
  methods: {
    ...mapMutations(['setToken']),
    handle() {
      console.log(this.userinfo.username, this.userinfo.password);
    },
    // 发送登录请求数据处理,也可以在发送请求的时候使用params包裹对象
    getJsontoRequestParam() {
      let paramStr = '';
      for (const key in this.userinfo) {
        paramStr += `&${key}=${this.userinfo[key]}`;
      }
      return paramStr.substring(1);
    },
    // 发送登录请求
    async postLogin() {
      const res = await login(this.getJsontoRequestParam());
      //   判断是否登录成功，登录不成功，给用户提示
      console.log(res);
      if (res.data.code !== 'success') return this.$message.error('账号或密码错误');
      //   将获得token值存储到本地浏览器,使用vuex中的方法
      this.setToken(res.data.data);
      // 登录成功之后，动态添加路由
      // 首先拼接路由
      this.$router.addRoutes([...this.routes]);
      //   登录成功之后跳转到home组件
      this.$router.push('/home');
    },
  },
};
</script>

<style lang="less" scoped>
.login-container {
  background-color: #364253;
  color: #fff;
  height: 100%;
  .login-table {
    height: 300px;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 420px;
    max-width: 100%;
    // padding: 35px 35px 15px;
    transform: translate(-50%, -50%);
    .login-title {
      font-size: 26px;
      text-align: center;
    }
  }
  .login-body {
    text-align: center;
    .el-input {
      margin-bottom: 25px;
      /deep/ .el-input__inner {
        background-color: rgba(40, 52, 67, 0.6);
        border-color: #3b4655;
      }
    }
  }
  .el-button {
    width: 100%;
    margin-top: 25px;
  }
}
</style>
